<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 网站说明 -->
    <meta name="description" content="小米官网-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货等数万个品牌优质商品.便捷、诚信的服务，为您提供愉悦的网上购物体验!" />
    <!-- 网页关键词 -->
    <meta name="Keywords" content="小米,Redmi,小米11,Redmi Note 10,网上购物,网上商城,手机,笔记本,电脑,相机,数码,配件" />
    <!-- 网站标题 -->
    <title>小米官网</title>
    <!-- 引入图标文件 -->
    <link rel="shortcut icon" href="image/favicon.ico">
    <!-- 引入初始化样式文件 -->
    <link rel="stylesheet" href="css/base.css">
    <!-- 引入公共样式文件 -->
    <link rel="stylesheet" href="css/common.css">
    <!-- 引入网站主样式 -->
    <link rel="stylesheet" href="css/index_main.css">
    <!-- 引入jQuery -->
    <script src="js/jQuery-3.6.0.min.js"></script>
    <!-- 引入动画JavaScript -->
    <script src="js/animation.js"></script>

    <!-- 头部图片样式 -->
    <style>
        .dang img {
            width: 100%;
            height: 300px;
        }
    </style>
</head>

<body>
    <!-- 建党百年图片部分
    <div class="dang ">
        <img src="image/header.png" alt="">
    </div> -->
    <!-- 头部区域制作 -->
    <div class="header">
        <div class="w">
            <!-- 头部左侧部分 -->
            <div class="header_le">
                <ul>
                    <li>
                        <a href="index.html">小米商城</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="#">MIUI</a>
                        <span>|</span>
                    </li>
                    <li>
                        <a href="#">loT</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">云服务</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">天星数科</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">有品</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">小爱开放平台</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">企业团购</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">资质证照</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">协议规则</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">下载APP</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">智能生活</a>
                        <span>|</span>
                    </li>
                    <li><a href="#">Select Location</a></li>
                </ul>
            </div>
            <!-- 头部右侧部分 -->
            <div class="header_ri">
                <div class="enter">
                    <ul>
                        <li>
                            <a href="./html/login.html">登录</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="./html/register.html">注册</a>
                            <span>|</span>
                        </li>
                        <li>
                            <a href="#">消息通知</a>
                        </li>
                    </ul>
                </div>
                <!-- 购物车部分 -->
                <a href="./html/cart.html">
                    <div class="shopcar">
                        <span>0</span>
                        购物车<em>(0)</em>
                        <!-- 购物车下拉部分 -->
                        <!-- <div class="shopcar_detail">
                        <p>购物车中还没有任何商品，赶紧选购吧</p>
                    </div> -->
                    </div>
                </a>

            </div>

        </div>
    </div>
    <!-- 导航栏部分制作 -->
    <div class="nav w">
        <!-- logo部分 -->
        <div class="logo">
            <h1><a href="index.html" title="小米官网">小米官网</a></h1>
        </div>
        <div class="nav_mi">
            <ul>
                <li><a href="#">小米手机</a></li>
                <li><a href="#">Redmi红米</a></li>
                <li><a href="#">电视</a></li>
                <li><a href="#">笔记本</a></li>
                <li><a href="#">家电</a></li>
                <li><a href="#">路由器</a></li>
                <li><a href="#">智能硬件</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">社区</a></li>
            </ul>
        </div>
        <div class="search">
            <input type="text" class="search_1" placeholder="家电">
            <button class="search_2"></button>
        </div>
    </div>
    <!-- 轮播图区域制作 -->
    <div class="banner">
        <div class="banxin w">
            <!-- 轮播图导航栏制作 -->
            <div class="banner_nav">
                <ul>
                    <li class="nav_detail1"><a href="#" class="banner_nav1">手机 电话卡</a>
                        <div class="detail_1">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/phone1.webp" alt="">小米10</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/phone2.webp" alt="">Note
                                        10 Pro</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/phone3.webp" alt="">Redmi
                                        K30S
                                        至尊纪念版</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/phone4.webp" alt="">Redmi
                                        Note9
                                        4G</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/phone5.webp" alt="">小米10S</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/phone6.webp" alt="">小米 11
                                        Ultra</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/phone7.webp" alt="">Redmi
                                        K30
                                        至尊纪念版</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/phone8.webp" alt="">Redmi
                                        Note8 Pro
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/phone9.webp" alt="">Redmi
                                        K40</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail2"><a href="#" class="banner_nav1">电视 盒子</a>
                        <div class="detail_2">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/tv1.webp" alt="">Redmi
                                        MAX 86
                                        超大屏</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/tv2.webp" alt="">Redmi
                                        智能电视 X系列</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/tv3.webp" alt="">小米透明电视
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/tv4.webp" alt="">小米电视大师82英寸
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/tv5.webp" alt="">大师电视65英寸</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/tv6.webp" alt="">Rdemi
                                        智能电视 MAX</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/tv7.webp" alt="">小米电视5
                                        Pro 55英寸
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/tv8.webp" alt="">小米电视5
                                        Pro 65英寸
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/tv9.webp" alt="">小米电视5
                                        Pro 75英寸</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/tv10.webp" alt="">小米电视5
                                        75英寸</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/tv11.webp" alt="">小米电视5
                                        65英寸</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/tv12.webp" alt="">金属全面屏电视</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/tv13.webp" alt="">小米全面屏电视</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail3"><a href="#" class="banner_nav1">笔记本 显示器</a>
                        <div class="detail_3">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/labtop1.webp" alt="">RedmiBook Pro
                                        14</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop2.webp" alt="">RedmiBook Pro
                                        15
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop3.webp" alt="">RedmiBook Pro
                                        16
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop4.webp" alt="">Redmi G 游戏本
                                        4G</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop5.webp" alt="">小米笔记本 Pro
                                        15</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop6.webp" alt="">RedmiBook Air
                                        13
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop7.webp" alt="">RedmiBook 16
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop8.webp" alt="">小米笔记本 Pro
                                        14
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/labtop9.webp" alt="">RedmiBook
                                        13</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail4"><a href="#" class="banner_nav1">家电 插线板</a>
                        <div class="detail_4">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/homeapp1.webp" alt="">冰箱</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp2.webp" alt="">微波炉
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp3.webp" alt="">电磁炉
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp4.webp" alt="">插线板
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp5.webp" alt="">立式空调</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp6.webp" alt="">电烤箱
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp7.webp" alt="">电水壶
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/homeapp8.webp" alt="">新风机
                                    </a></li>

                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail5"><a href="#" class="banner_nav1">出行 穿戴</a>
                        <div class="detail_5">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/walk1.webp" alt="">小米手环6</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/walk2.webp" alt="">平衡车</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/walk3.webp" alt="">滑板车
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/walk4.webp" alt="">自行车
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/walk5.webp" alt="">车载充电器</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/walk6.webp" alt="">智能后视镜</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/walk7.webp" alt="">智能记录仪
                                    </a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail6"><a href="#" class="banner_nav1">智能 路由器</a>
                        <div class="detail_6">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/AI1.webp" alt="">打印机</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/AI2.webp" alt="">摄像机</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/AI3.webp" alt="">小爱音响
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/AI4.webp" alt="">喷墨打印机
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/AI5.webp" alt="">照相机</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/AI6.webp" alt="">智能门锁</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/AI7.webp" alt="">小米路由器
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/AI8.webp" alt="">R视频门铃
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/AI9.webp" alt="">小爱老师</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail7"><a href="#" class="banner_nav1">电源 配件</a>
                        <div class="detail_7">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/power1.webp" alt="">移动电源</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/power2.webp" alt="">手机壳</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/power3.webp" alt="">数据线
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/power4.webp" alt="">Redmi
                                        Note9
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/power5.webp" alt="">车充</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/power6.webp" alt="">无线充电器</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail8"><a href="#" class="banner_nav1">健康 儿童</a>
                        <div class="detail_8">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/health1.webp" alt="">洗手机</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/health2.webp" alt="">体脂称
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/health3.webp" alt="">走步机
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/health4.webp" alt="">剃须刀
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/health5.webp" alt="">早教启智</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/health6.webp" alt="">修剪器
                                    </a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/health7.webp" alt="">益智积木
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/health8.webp" alt="">牙刷

                                    </a></li>

                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail9"><a href="#" class="banner_nav1">耳机 音响</a>
                        <div class="detail_9">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/erji1.webp" alt="">Redmi
                                        AirDots
                                        3</a></li>
                                <li><a href="" class="detail_goods1"><img src="image/erji2.webp" alt="">小米小爱触屏音箱</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/erji3.webp" alt="">品牌耳机
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/erji4.webp" alt="">小爱音箱
                                        Art 电池版
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/erji5.webp" alt="">Redmi
                                        音箱</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/erji6.webp" alt="">蓝牙音箱</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/erji7.webp" alt="">小米AI
                                        音箱
                                    </a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="nav_detail10"><a href="#" class="banner_nav1">生活 箱包</a>
                        <div class="detail_10">
                            <ul class="detail_goods">
                                <li><a href="" class="detail_goods1"><img src="image/bag1.webp" alt="">小背包</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/bag2.webp" alt="">床垫</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/bag3.webp" alt="">米兔
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/bag4.webp" alt="">双肩包
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/bag5.webp" alt="">枕头</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/bag6.webp" alt="">笔</a>
                                </li>
                                <li><a href="" class="detail_goods1"><img src="image/bag7.webp" alt="">胸包
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/bag8.webp" alt="">螺丝刀
                                    </a></li>
                                <li><a href="" class="detail_goods1"><img src="image/bag9.webp" alt="">旅行箱</a>
                                </li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="banner_pic w">
                <ul class="banner_img">
                    <li class="ac"><img src="image/lbt1.webp" alt=""></li>
                    <li><img src="image/lbt2.webp" alt=""></li>
                    <li><img src="image/lbt3.webp" alt=""></li>
                    <li><img src="image/lbt4.webp" alt=""></li>
                </ul>
                <ol class="circle">
                </ol>
                <!-- 轮播图箭头部分 -->
                <div class="banner_ri">
                    <div class="arrow_le"> <a href="#javascrpit" class="le"></a></div>
                    <div class="arrow_ri"><a href="#javascrpit" class="ri"></a></div>
                </div>
            </div>

        </div>
    </div>
    <!-- 推荐模块制作 -->
    <div class="column w">
        <!-- 左侧模块部分 -->
        <div class="column_1">
            <ul>
                <li>
                    <a href="#" class="recommend">小米秒杀</a>
                </li>
                <li><a href="#" class="team">企业团购</a></li>
                <li><a href="#" class="passage">F码通道</a></li>
                <li><a href="#" class="card">米粉卡</a></li>
                <li><a href="#" class="new">以旧换新</a></li>
                <li><a href="#" class="bill">话费充值</a></li>
            </ul>
        </div>
        <!-- 右侧图片部分 -->
        <div class="column_2">
            <ul>
                <li><a href="#" class="mi1"></a></li>
                <li><a href="#" class="mi2"></a></li>
                <li><a href="#" class="mi3"></a></li>
            </ul>
        </div>

    </div>
    <!-- 侧边栏部分制作 -->
    <div class="aside">
        <ul>
            <li><a href="javascript:;" class="aside_shoujiapp">
                    <span>手机APP</span>
                    <div class="aside_pic"><img src="image/QQ二维码.png" alt="">
                        <p>微信扫一扫 </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="javascript:;" class="aside_seckill">
                    <span>小米秒杀</span>
                </a>
            </li>
            <li><a href="javascript:;" class="aside_phone">
                    <span>手机</span>
                </a></li>
            <li><a href="javascript:;" class="aside_homeapp">
                    <span>家电</span>
                </a></li>
            <li><a href="javascript:;" class="aside_smart">
                    <span>智能</span>
                </a></li>

        </ul>
    </div>
    <!-- 楼层模块制作 -->
    <div class="floor">
        <!-- 小米秒杀模块制作 -->
        <div class="seckill w t">
            <!-- 小米秒杀导航栏部分 -->
            <div class="seckill_nav">
                <h2>小米秒杀</h2>
                <div class="swiper">
                    <span class="swiper_prev"></span>
                    <span class="swiper_next"></span>
                </div>
            </div>
            <!-- 小米秒杀商品部分 -->
            <div class="seckill_goods">
                <!-- 第一个图块 -->
                <div class="seckill_news">
                    <h2><span id="end">XXX</span>:00 点场</h2>
                    <img src="image/下载.jpg" alt="">
                    <p>当前时间</p>
                    <div>
                        <span id="hour">02</span>
                        <i>:</i>
                        <span id="minute">00</span>
                        <i>:</i>
                        <span id="second">00</span>
                    </div>
                </div>
                <div class="seckill_good">
                    <ul>
                        <!-- 第一页盒子 -->
                        <li>
                            <a href="#" class="seckill_goods1">
                                <div class="goods1_pic">
                                    <img src="image/mi4.webp" alt="">
                                </div>
                                <h3>LUCKYMELIFE百变随心搭配多种样式</h3>
                                <p class="meet">遇见LUCKYMELIFE，遇见你</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a>
                        </li>
                        <li><a href="#" class="seckill_goods2">
                                <div class="goods1_pic">
                                    <img src="image/mi5.webp" alt="">
                                </div>
                                <h3>小米路由器11 新款上市</h3>
                                <p class="meet">网络更加通畅</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi6.webp" alt="">
                                </div>
                                <h3>小米行李箱</h3>
                                <p class="meet">出行更便捷</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods4">
                                <div class="goods4_pic">
                                    <img src="image/mi7.webp" alt="">
                                </div>
                                <h3>小米自拍杆</h3>
                                <p class="meet">拍出最美的你</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi8.webp" alt="">
                                </div>
                                <h3>8H释压舒弹纤维枕 抗菌对装 白色</h3>
                                <p class="meet">8H释压舒弹纤维枕 抗菌对装</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <!-- 第二页盒子 -->
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi9.webp" alt="">
                                </div>
                                <h3>木星黎明系列积木 静态积木搭建</h3>
                                <p class="meet">大扭矩电机，真彩灯模块</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi11.webp" alt="">
                                </div>
                                <h3>小米智能门锁</h3>
                                <p class="meet">安全防护您的安全</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi12.webp" alt="">
                                </div>
                                <h3>赫特变频擦窗机器人DDC55 白色</h3>
                                <p class="meet">干湿两擦不打滑</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi13.webp" alt="">
                                </div>
                                <h3>米兔儿童滑板车 粉色</h3>
                                <p class="meet">安全好玩的酷玩具</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <!-- 第三页盒子 -->
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi14.webp" alt="">
                                </div>
                                <h3>智能滑板车 无线型全新上市</h3>
                                <p class="meet">更多助力选择 更多城市风景</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi15.webp" alt="">
                                </div>
                                <h3>日常元素抽纸青春版</h3>
                                <p class="meet">精选原生竹浆</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="seckill_goods3">
                                <div class="goods3_pic">
                                    <img src="image/mi16.webp" alt="">
                                </div>
                                <h3>小米背包全新上市 电脑包</h3>
                                <p class="meet">出行更加便捷</p>
                                <p class="price">521元</p>
                                <del>1314元</del>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 广告新闻条1 -->
        <div class="news_1 w">
            <a href="#"> <img src="image/news1.webp" alt=""></a>
        </div>
        <!-- 手机模块制作 -->
        <div class="phone w t">
            <!-- 手机导航条 -->
            <div class="phone_nav">
                <h2>手机</h2>
                <a href="./html/list.html">
                    <p>查看更多</p>
                </a>
            </div>
            <!-- 手机商品 -->
            <div class="phone_goods">
                <div class="phone_goods_le">
                    <a href=""><img src="image/shouji1.webp" alt=""></a>
                </div>
                <div class="phone_goods_ri">
                    <ul>
                        <li><a href="./html/product.html" class="shouji_goods1" target="_blank">
                                <div class="goods1_pic">
                                    <img src="image/shouji2.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji3.webp" alt="">
                                </div>
                                <h3>小米11 Pro</h3>
                                <p class="meet">1/1.12"GN2|骁龙888</p>
                                <p class="price">4499元</p>
                                <del>521元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji4.webp" alt="">
                                </div>
                                <h3>Redmi Note 10 5G</h3>
                                <p class="meet">5G小金刚，旗舰长续航</p>
                                <p class="price">999元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji5.webp" alt="">
                                </div>
                                <h3>K10 游戏增强版</h3>
                                <p class="meet">轻薄电竞设计</p>
                                <p class="price">1999元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji6.webp" alt="">
                                </div>
                                <h3>小米11 青春版</h3>
                                <p class="meet">小米11 青春版 轻薄</p>
                                <p class="price">2299元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji7.webp" alt="">
                                </div>
                                <h3>黑鲨4 Pro</h3>
                                <p class="meet">黑鲨4 Pro</p>
                                <p class="price">3999元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji8.webp" alt="">
                                </div>
                                <h3>小米MIX FOLD</h3>
                                <p class="meet">折叠大屏|自研芯片</p>
                                <p class="price">9999元</p>
                                <del>1314元</del>
                            </a></li>
                        <li><a href="#" class="shouji_goods1">
                                <div class="goods1_pic">
                                    <img src="image/shouji9.webp" alt="">
                                </div>
                                <h3>小米11 Ultra</h3>
                                <p class="meet">1/1.12"GN2|2K四微曲屏</p>
                                <p class="price">5499元</p>
                                <del>1314元</del>
                            </a></li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 广告新闻条2 -->
        <div class="news_2 w">
            <a href="#"> <img src="image/news2.webp" alt=""></a>
        </div>
        <!-- 家电模块制作 -->
        <div class="homeapp w t">
            <div class="homeapp_nav">
                <h2>家电</h2>
                <ul>
                    <li><a href="">热门</a></li>
                    <li><a href="">耳机音箱</a></li>
                </ul>
            </div>
            <div class="homeapp_goods">
                <div class="homeapp_goods_le">
                    <ul>
                        <li><a href="#"><img src="image/jiadian1.webp" alt=""></a></li>
                        <li><a href="#"><img src="image/jiadian2.webp" alt=""></a></li>
                    </ul>
                </div>
                <div class="homeapp_goods_ri">
                    <ul>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian3.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian4.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian5.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian6.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian7.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian8.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="homeapp_goods1">
                                <div class="goods1_pic">
                                    <img src="image/jiadian9.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="smallbox">
                            <a href="">
                                <h3>米家空气净化器Pro</h3>
                                <p>949元</p>
                                <div class="goods2_pic">
                                    <img src="image/jiadian10.webp" alt="">
                                </div>
                            </a>
                        </li>
                        <li class="smallbox_more">
                            <a href="./html/list.html">
                                <h3>浏览更多</h3>
                                <p>热门</p>
                                <i></i>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- 广告新闻条3 -->
        <div class="news_3 w">
            <a href="#"> <img src="image/news3.webp" alt=""></a>
        </div>
        <!-- 智能模块制作 -->
        <div class="smart w t">
            <div class="smart_nav">
                <h2>智能</h2>
                <ul>
                    <li><a href="">热门</a></li>
                    <li><a href="">安防</a></li>
                    <li><a href="">出行</a></li>
                </ul>
            </div>
            <div class="smart_goods">
                <div class="smart_goods_le">
                    <ul>
                        <li><a href="#"><img src="image/smart1.webp" alt=""></a></li>
                        <li><a href="#"><img src="image/smart2.webp" alt=""></a></li>
                    </ul>
                </div>
                <div class="smart_goods_ri">
                    <ul>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart3.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart4.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart5.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart6.jpg" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart7.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart8.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="bigbox"><a href="#" class="smart_goods1">
                                <div class="goods1_pic">
                                    <img src="image/smart9.webp" alt="">
                                </div>
                                <h3>Note 10 Pro</h3>
                                <p class="meet">天玑1100旗舰芯，VC液冷散热</p>
                                <p class="price">1599元</p>
                                <del>1314元</del>
                            </a></li>
                        <li class="smallbox">
                            <a href="">
                                <h3>米家空气净化器Pro</h3>
                                <p>949元</p>
                                <div class="goods2_pic">
                                    <img src="image/jiadian9.webp" alt="">
                                </div>
                            </a>
                        </li>
                        <li class="smallbox_more">
                            <a href="">
                                <h3>浏览更多</h3>
                                <p>热门</p>
                                <i></i>
                            </a>
                        </li>

                    </ul>
                </div>
            </div>
        </div>
        <!-- 广告新闻条4 -->
        <div class="news_4 w">
            <a href="#"> <img src="image/news4.webp" alt=""></a>
        </div>
    </div>
    <!-- 尾部区域制作 -->
    <div class="footer w">
        <!-- 尾部区域服务部分 -->
        <div class="serve">
            <ul>
                <li><a href="#" class="serve_1">预约维修服务</a></li>
                <li><a href="#" class="serve_2">7天无理由退货</a></li>
                <li><a href="#" class="serve_3">15天免费换货</a></li>
                <li><a href="#" class="serve_4">满69包邮</a></li>
                <li><a href="#" class="serve_5">520余家售后网店</a></li>
            </ul>
        </div>
        <!-- 尾部区域指南部分 -->
        <div class="guild">
            <!-- 尾部区域指南左侧部分 -->
            <div class="guild_le">
                <dl>
                    <dt>帮助中心</dt>
                    <dd><a href="">账户管理</a></dd>
                    <dd><a href="">购物指南</a></dd>
                    <dd><a href="">订单操作</a></dd>
                </dl>
                <dl>
                    <dt>服务支持</dt>
                    <dd><a href="">售后政策</a></dd>
                    <dd><a href="">自助服务</a></dd>
                    <dd><a href="">相关下载</a></dd>
                </dl>
                <dl>
                    <dt>线下门店</dt>
                    <dd><a href="">小米之家</a></dd>
                    <dd><a href="">服务网点</a></dd>
                    <dd><a href="">授权体验店</a></dd>
                </dl>
                <dl>
                    <dt>关于小米</dt>
                    <dd><a href="">了解小米</a></dd>
                    <dd><a href="">加入小米</a></dd>
                    <dd><a href="">投资者关系</a></dd>
                    <dd><a href="">企业社会责任</a></dd>
                    <dd><a href="">廉洁举报</a></dd>
                </dl>
                <dl>
                    <dt>关注我们</dt>
                    <dd><a href="">新浪微博</a></dd>
                    <dd><a href="">官方微信</a></dd>
                    <dd><a href="">联系我们</a></dd>
                    <dd><a href="">公益基金会</a></dd>
                </dl>
                <dl>
                    <dt>特色服务</dt>
                    <dd><a href="">F码通道</a></dd>
                    <dd><a href="">礼物码</a></dd>
                    <dd><a href="">防伪查询</a></dd>
                </dl>
            </div>
            <!-- 尾部区域指南右侧部分 -->
            <div class="guild_ri">
                <h2>400-100-5678</h2>
                <p class="time">8:00-18:00(仅收市话费)</p>
                <a href="" class="customer">人工客服</a>
                <p class="view">关注小米：
                    <a href="" class="qq"></a>
                    <a href="" class="fire"></a>
                </p>

            </div>
        </div>
    </div>
    <!-- 引入主页JavaScript -->
    <script src="js/axios.min.js"></script>
    <script src="./js/main.js"></script>
    <script src="./js/nickname.js"></script>
</body>

</html>